<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div class="flex items-center justify-between pb-4">
				<div>
					<el-breadcrumb separator-icon="ArrowRight">
						<el-breadcrumb-item :to="{ path: '/tariff/basicExpensesDeptDetail/index' }" replace>单位配置</el-breadcrumb-item>
						<el-breadcrumb-item>配置详情</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
			</div>
			<el-table
				:data="state.dataList"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
			>
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="deptName" label="所属单位" show-overflow-tooltip min-width="160" />
				<!-- <el-table-column prop="deliveryMethod" label="是否代付" width="90">
					<template #default="{ row }">
						<span v-if="row.deliveryMethod === 10" class="text-info">否</span>
						<span v-if="row.deliveryMethod === 20" class="text-primary">是</span>
					</template>
				</el-table-column> -->

				<el-table-column prop="addPlatformFeeYears" label="新增平台年限" show-overflow-tooltip min-width="130" />
				<el-table-column prop="ttsAddNum" label="新增语音数(分钟)" show-overflow-tooltip min-width="150">
					<template #default="{ row }">
						<span>{{ row.ttsAddNum === 999999 ? '无限制' : row.ttsAddNum }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="smsAddNum" label="新增短信数(条)" show-overflow-tooltip width="120">
					<template #default="{ row }">
						<span>{{ row.smsAddNum === 999999 ? '无限制' : row.smsAddNum }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="deviceAddNum" label="新增设备数(台)" show-overflow-tooltip width="120" />
				<el-table-column prop="platformExpireDate" label="平台到期时间" show-overflow-tooltip min-width="160" />
				<el-table-column prop="smsRemainNum" label="短信剩余(条)" show-overflow-tooltip min-width="120">
					<template #default="{ row }">
						<span>{{ row.smsRemainNum === 999999 ? '无限制' : row.smsRemainNum }}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="smsExpirationDate" label="短信代付到期时间" show-overflow-tooltip width="160" /> -->
				<el-table-column prop="ttsRemainNum" label="语音剩余(分钟)" show-overflow-tooltip min-width="120">
					<template #default="{ row }">
						<span>{{ row.ttsRemainNum === 999999 ? '无限制' : row.ttsRemainNum }}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="ttsExpirationDate" label="语音代付到期时间" show-overflow-tooltip width="160" /> -->
				<el-table-column prop="deviceRemainNum" label="设备剩余(台)" show-overflow-tooltip min-width="120" />
				<el-table-column prop="updateTime" label="操作时间" show-overflow-tooltip min-width="160" />
			</el-table>
		</div>
	</div>
</template>

<script setup lang="ts" name="BasicExpensesDeptPaySetDetailDialog">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { byDeptId } from '/@/api/tariff/basicExpensesDeptDetail';
import { useRoute } from 'vue-router';
const route = useRoute();
// 定义变量内容
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		deptId: '',
	},
	pageList: byDeptId,
	createdIsNeed: false,
});
//  table hook
const { tableStyle } = useTable(state);

onMounted(() => {
	const query = route.query;
	if (query?.deptId) {
		byDeptId(query.deptId as string).then((res) => {
			state.dataList = res.data;
		});
	}
});
</script>
